<template>
  <div class="login-wrapper">
    <div class="login-context">
        <h1>HIS云医院系统登录</h1>
        <el-form :rules="rules" :model="lyform" ref="formobj" label-width="100px">
            <!--在 <el-form-item> 组件中，prop 属性用于指定表单字段的名称，主要用于表单验证。-->
            <el-form-item label="登录名" prop="username"><!--prop 属性是表单验证的属性，必须写，否则表单验证无效-->
                <el-input v-model="lyform.username" placeholder="请输入登录手机号"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password"> <!--prop 属性是表单验证的属性，必须写，否则表单验证无效-->
                <el-input v-model="lyform.password" placeholder="请输入登录密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import {post} from '@/utils/axios'
import VueCookie from 'vue-cookie'
import { EmployeeStore } from '@/stores/counter'
import router from '@/router'
const employeeStore = EmployeeStore()
const formobj = ref()
const lyform = reactive({
    username:'',
    password:''
})
const rules = {
    username:[
        {required:true,message:'请输入登录手机号',trigger:'blur'}
    ],
    password:[
        {required:true,message:'请输入密码',trigger:'blur'}
    ]
    
}
function login () {
  post('/employee/login', lyform, content => {
    VueCookie.set('token', content, { expires: 7 }) //设置cookie 存token 存七天
    getempData()
    router.push('/index') //跳转路由
  }, formobj)
}
function getempData () {
  post('/employee/getEmplogin',lyform, content => {
    console.dir(content)
    employeeStore.set(content)
  })
}
</script>


<style lang='scss' scoped>
.login-wrapper {
    height: 100vh;
    width: 100%;
    // background-image: linear-gradient(180deg,#20A0FF,#ffffff,);
    background-image: url('https://haowallpaper.com/link/common/file/previewFileImg/15787725579850048');
    background-size: 100%,100%; // 让背景图覆盖整个元素
    background-repeat: no-repeat; // 防止背景图重复
    display: flex;
    .login-context {
        width: 500px;
        height: 300px;
        background-color: #ffffff;
        margin: auto;
        border-radius: 5px;
        h2 {
            margin-top: 40px;
            text-align: center;
            letter-spacing: 0.5rem;
        }
        .el-form {
            margin-top: 40px;
            margin-right: 50px;
        }
    }
}
</style>